 <!-- 二维码登入 -->
<template>
  <div class="erwei">
    <div class="img">
      <img :src="qrImg" width="200px" alt="二维码" />
      <i class="mask" v-if="showQrMask" :style="maskBg" @click="ewsxUrl"></i>
      <!-- <img src="../../assets/img/scancode.png"> -->
    </div>
    <p>
      <svg aria-hidden="true" class="icon-wx">
        <use xlink:href="#icon-weixin"></use>
      </svg>
    </p>
    <b>扫描二维码</b>
  </div>
</template>

<script>
//引入socket.io
import socketIo from "socket.io-client";
//引入qrcode
import qrcode from "qrcode";
//引入api
import * as api from "../../api/users";
// 引入二维码遮罩
import invalidImg from "../../assets/img/invalidQr.png"
import scanSuccessImg from "../../assets/img/scancode.png"
import storge from '@/utils/storage'

export default {
  props: ["storageUserInfo"],

  data() {
    return {
      qrImg: "", // 二维码图片
      showQrMask: true, // 是否显示遮罩
      maskBg: { backgroundImage: `url(${scanSuccessImg})` }, // 扫码成功
    //   maskBgInvalids:{background:url(invalidImg)}, // 失效图片
    };
  },

  created() {
    // 建立socket链接
    let io = socketIo("wss://chst.vip");
    // 监听连接的事件
    io.on("connectSuccess", async ({ sid }) => {
      // console.log(sid)
         storge.set('qf-sid',sid)

         this.getUrl(sid)
    });
    
    io.on("invalidCode", (data) => {
      console.log(data);
      // 显示无效二维码样式
        this.showQrMask = true;
     // 显示无效的二维码遮罩样式
        this.maskBg.backgroundImage = `url(${invalidImg})`

    });

    // 扫码成功
    io.on('scancodeSuccess', async ({ state, wechatCode, msg }) => {
        console.log(wechatCode)
        this.showQrMask = true
        this.maskBg.backgroundImage = `url(${scanSuccessImg})`
        if (state) {
            // 调用微信登入的接口
            let res = await api.wechatLoginApi(wechatCode);
            // 将内容存到本地
            this.storageUserInfo(res.data)
            console.log(res)
        } else {
            console.error(msg)
        }

    })

  },
  methods:{
    async getUrl(sid){
     
     // 请求获取二维码地址
      let res = await api.getQrCodeApi(sid);
      console.log(res);
      console.log(sid)
      let { scanCodeUrl: qrcodeUrl } = res.data;

      // 通过qrcode插件生成二维码
      qrcode.toDataURL(qrcodeUrl, (err, img) => {
        if (err) {
          throw err;
        }
        // console.log(img)
        this.qrImg = img;
        //关掉遮罩
        this.showQrMask = false;
      });
     },
     // 点击二维码更新
     ewsxUrl(){

        // 获取本地存储sid
        let sid = storge.get('qf-sid')
        console.log(sid)
        this.getUrl(sid)
     }
  }
};
</script>
<style lang="less" scoped>
.erwei {
  text-align: center;
  color: #fff;
  display: block;
}
/deep/ .el-loading-mask {
  background-color: rgba(255, 255, 255, -0.9) !important;
}
.icon-wx {
  width: 25px;
  height: 25px;
  vertical-align: -7px;
  margin-right: 5px;
}
.mask {
            width: 200px;
            height: 200px;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 114px;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }</style>

